<link rel="stylesheet" type="text/css"
    href="/modules/skill_map/resources/css/skill_map.css"/>

<link rel="stylesheet" type="text/css"
    href="/static/dc.js-1.6.0/dc.js-1.6.0/dc.css"/>

{% import 'skill_card.html' as skill_card %}

<script charset="utf-8"
    src="/modules/skill_map/resources/d3-3.4.3/d3.min.js" ></script>
<script src="/static/dc.js-1.6.0/dc.js-1.6.0/dc.min.js"></script>
<script src="/static/crossfilter-1.3.7/crossfilter-1.3.7/crossfilter.min.js"></script>

<script src="/modules/skill_map/resources/js/skill_tagging_lib.js"></script>
<script src="/modules/skill_map/resources/js/skills_competencies_analytics.js"></script>


<div id="xf-data" class="chart-container" data-xf-data="{{ xf_data }}">
</div>

{% if skill_map_is_empty %}
  <div class="empty-skill-map">The Skill Map for this course is empty.</div>
{% else %}
<div class="competencies">
  <div class="units-filter">
    <h3>Units</h3>
    <div class="units"></div>
  </div>
  <div class="container">
    <div class="legend">
      {{ skill_card.display_proficiency_legend(False) }}
    </div>
    <div id="competencies-container">
    </div>
  </div>
</div>
{% endif %}

<script>
  $(function() {
    var data = $('#xf-data').data('xf-data');
    if (data.length == 0) {
      return;
    }
    var chartTable = new ChartTable($('#competencies-container'), 3, data);
    chartTable.buildUnitSelector($('.units'));
    chartTable.buildTable();
  });
</script>
